<template>
	<view  style="display: flex;margin:0 auto;flex-direction: column; width: 749rpx;">
		<!-- 最上面的教室选择 -->
		<u-tabs  style="height: 80rpx;" :current="current" :list="xiaoqu" 
			scroll-y="true" lineWidth="50" lineColor="blue"
			:activeStyle="{ color: 'black',  transform: 'scale(1)'}"
			:inactiveStyle="{color: '#606266',transform: 'scale(0.9)'}"
			itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="change">
		</u-tabs>
		
		<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
			<view class="">
				<view style="display: flex;font-size: 25rpx; flex-direction: row;align-content: center;margin-top: 20rpx;font-size: 26rpx;margin-left: 30rpx;">
					<picker mode='date' :value="earningDate"  selector-type='select' @change='bindEarningDateChange'>
						<view style="display: flex;align-items: center;box-shadow: 1px 1px 5px #c2c2c2;padding: 5rpx 20rpx;border-radius: 8rpx;margin: 0 10rpx 0 10rpx;">{{earningDate}}
						<uni-icons type="bottom"></uni-icons>
						</view>
					</picker>
					<view style="display: flex;align-items: center;">
						→
					</view>
					<picker mode='date' :value="earningDate1"  selector-type='select' @change='bindEarningDateChange1'>
						<view style="display: flex;align-items: center;box-shadow: 1px 1px 5px #c2c2c2;padding: 5rpx 20rpx;border-radius: 8rpx;margin: 0 10rpx 0 10rpx;">{{earningDate1}}
							<uni-icons type="bottom"></uni-icons>
						</view>
					</picker>
					<view style="display: flex;background-color: white;box-shadow: 2rpx 2rpx 2rpx 4rpx blue; border-radius: 10rpx;padding: 10rpx 30rpx; justify-content: center;align-items: center;margin-left:30rpx;font-size: 25rpx;" @click="xueshenglistfun()">
						报课统计
					</view>
				</view>
			</view>
			
		</view>
		<view style="display: flex;justify-content: space-around;width:80%;margin:30rpx 10rpx 10rpx 30rpx;font-size: 26rpx;">
			<view :class="[biaoqian1 ? 'xuanzhong' : 'weixuanzhong']"  @click="tip1">
				本月
			</view>
			<view :class="[biaoqian2 ? 'xuanzhong' : 'weixuanzhong']"  @click="tip2">
				上月
			</view>
			<view :class="[biaoqian3 ? 'xuanzhong' : 'weixuanzhong']"  @click="tip3">
				上上月
			</view>
			<picker mode='date' :value="earningDate" fields="month"  selector-type='select' @change='xuanzeriqi'>
				<view :class="[biaoqian4 ? 'xuanzhong' : 'weixuanzhong']"  >
					{{shu1}}
				</view>
			</picker>
		</view>
		
		<!-- 搜索框 -->
	<!-- 	<view style="display: flex;width: 100%;background-color: white;margin-top: 20rpx;margin-bottom: 20rpx;">
			<view style="display: flex;width: 90%;margin: 10rpx auto;">
				<u-search :showAction="true" v-model="keyword" placeholder="请输入要搜索的关键词" actionText="搜索"
					:animation="false" @custom="sousuo1" @search="sousuo1"></u-search>
			</view>
		</view> -->
		<!-- <uni-popup ref="popup" type="center"> -->
			<view style="display: flex;font-size: 28rpx; padding: 30rpx 30rpx; background-color: white;flex-direction: column;border-radius: 20rpx;">
				<!-- <view style="display: flex;width: 150rpx; padding: 10rpx 30rpx; border-radius: 20rpx;color: black;justify-content: center;align-items: center;box-shadow: 2rpx 2rpx 4rpx 5rpx #c2c2c2;">
					{{shu8}}
				</view> -->
				<view style="display: flex;align-items: center;margin:30rpx 10rpx 5rpx 30rpx;">
					<view style="width:6rpx;height: 30rpx;background-color: blue;border-radius: 5rpx;margin-right:10rpx;">
						
					</view>
					<view style="font-weight: bold;">
						{{shu8}}
					</view>
				</view>
				<view style="display: flex;margin-top:20rpx;">
					<view style="display: flex;flex-direction: column;align-items: center;flex: 1;">
						<text>课程总数</text>
						<text style="color: dimgrey;">{{kechengzongshu.total}}</text>
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;flex: 1;">
						<text>正上课</text>
						<text style="color: dimgrey;">{{zhengshangkeshu.total}}</text>
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;flex: 1;">
						<text>已结束</text>
						<text style="color: dimgrey;">{{yijieshushu.total}}</text>
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;flex: 1;">
						<text>已续费</text>
						<text style="color: dimgrey;">{{yixufeishu.total}}</text>
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;flex: 1;">
						<text>已退费</text>
						<text style="color: dimgrey;">{{tuifeiShu.total}}</text>
					</view>
				</view>
				
				<view style="display: flex;align-items: center;margin:30rpx 10rpx 5rpx 30rpx;">
					<view style="width:6rpx;height: 30rpx;background-color: blue;border-radius: 5rpx;margin-right:10rpx;">
						
					</view>
					<view style="font-weight: bold;">
						各科目明细
					</view>
				</view>
				<view v-for="(item,index) in shu7" :key=index style="display: flex;width:100%;margin: 10rpx auto;box-shadow: 2rpx 2rpx 4rpx 5rpx #c2c2c2;border-radius: 10rpx;background-color: white;flex-direction: column;font-size: 28rpx;">
					<view style="display: flex;margin: 15rpx 10rpx 0 30rpx;flex-wrap: wrap;">
						<text style="font-weight:bold;">课程：</text>
						<text style="color: dimgrey;">{{item._id}}</text>
					</view>
					<view style="display: flex;margin: 5rpx 10rpx 15rpx 30rpx;">
						<view class="">
							<text style="font-weight:bold;">学生数：</text>
							<text style="color: dimgrey;">{{item.num}}</text>
						</view>
						<view style="margin-left: 30rpx;">
							<text style="font-weight:bold;">总费用：</text>
							<text style="color: dimgrey;">{{item.total}}</text>
						</view>
					</view>
					
				</view>
			</view>
		<!-- </uni-popup> -->
	</view>
</template>

<script>
	// import getDateTime from '@/common/getdateTime.js';
	export default {
		data() {
			// const currentDate = this.getDate({
			//             format: true
			//         })
			return {
				current:0,
				xiaoqu:[],
				year:'',
				month:'',
				day:'',
				smonth:'',
				ssmonth:'',
				biaoqian1:false,
				biaoqian2:false,
				biaoqian3:false,
				biaoqian4:false,
				zongshouru:0,
				zongzhichu:0,
				keyword: '', //搜索框的关键词
				page:1,//获取明细从第一页起
				shu1:'选择>>',
				shu2:'选择类型',
				kechengzongshu:[],//学生总数量
				zhengshangkeshu:[],//学生正上课的数量
				yijieshushu:[],//学生已上完课的数量
				yixufeishu:[],//学生已续费的数量
				tuifeiShu:0,
				shu7:[],//学生按课程名程分组
				shu8:'全部数据',
				shu9:'全部数据',//临时存放shu8的数据
				index:'',
				index1:'',
				earningDate:'起始日期',
				earningDate1:'终止日期',
				qishitime:'',
				jieshutime:'',
				meiyi_userinfo:[],
				list1:[],
				list2:[],
				myxinyongka:[],
				myxinyongka1:[],
				leixing1:["改可用","改未还","还款","刷卡"]
			}
		},
		onLoad() {
			this.xiaoqufun()
			const date = new Date();
			this.year = date.getFullYear();
			let month1 = (date.getMonth() + 1);
			this.month=month1<10?'0'+month1:month1
			this.day = date.getDate();
			this.qishitime='2010-01-01 00:00:00'
			this.jieshutime=this.year+'-'+this.month+'-'+this.day+' 23:59:59'
			this.smonth=month1==1?(this.year-1)+'-12':this.year+'-'+(month1<11?'0'+(month1-1):(month1-1))
			this.ssmonth=month1<3?(this.year-1)+'-'+(month1+10):this.year+'-'+(month1<12?'0'+(month1-2):(month1-2))
		},
		// 上拉触底
		onReachBottom() {
		  // this.page += 1
		 //  if(this.earningDate=='起始日期' && this.earningDate1=='终止日期' && this.shu1=='选择银行卡' && this.shu2=='选择类型'){
			// this.liushuilist();
		 //  }else{
			// this.queren1()
		 //  }
		},
		// computed: {
		// 	startDate() {
		// 		return this.getDate('start');
		// 	},
		// 	endDate() {
		// 		return this.getDate('end');
		// 	}
		// },
		methods: {
			// 点击不同的校区时
			change(e){
				this.xiaoqu_zhanshi=[]
				if(e.name=='全部'){
					this.xiaoqu_zhanshi=this.wodexiaoqu
				}else{
					this.xiaoqu_zhanshi.push(e.name)
				}
				this.tongji()
			},
			// 获取校区的信息
			async xiaoqufun(){
				const res=await uni.getStorageSync('aoyashengxiaoqu')
				this.xiaoqu=[]
				let arr=[]
				for(var i=0;i<res.result.data.length;i++){
					var cou=0
					for(var j=i+1;j<res.result.data.length;j++){
						if(res.result.data[i].name==res.result.data[j].name){
							cou=9
							break
						}
					}
					if(cou==0){
						this.xiaoqu.push(res.result.data[i])
						arr.push(res.result.data[i].name)
					}
				}
				this.wodexiaoqu=arr
				if(this.xiaoqu.length>1){
					this.xiaoqu.unshift ({
						name:'全部'
					})	
				}else{
					this.kechengzongshu=this.xiaoqu[0].name
				}	
				this.xiaoqu_zhanshi=this.wodexiaoqu
				this.tongji()
			},
			tongji(){
				// this.$refs.popup.open()
				this.xueshenglistfun()
			},
			xueshenglistfun(){
				uni.showLoading({
					title:"加载中……",
					mask:true
				})
				this.shu8=this.shu9
				uniCloud.callFunction({
					name:"sum",
					data:{
						leixing:5,//类型为31时，搜索学生的信息
						qishitime:this.qishitime,
						jieshutime:this.jieshutime,
						weizhi:this.xiaoqu_zhanshi
					}
				}).then(res=>{
					this.kechengzongshu=res.result.res
					this.zhengshangkeshu=res.result.res1
					this.yijieshushu=res.result.res2
					this.yixufeishu=res.result.res3
					this.tuifeiShu=res.result.res5
					this.shu7=res.result.res4.data
					uni.hideLoading()
					// console.log(res)
					
				})
			},
			tip1(){
				this.earningDate = this.year+'-'+this.month+'-01'
				this.earningDate1 = this.year+'-'+this.month+'-'+( ['01','03','05','07','08','10','12'].includes(this.month)?'31':'30')
				this.qishitime=this.earningDate+ ' 00:00:00',
				this.jieshutime=this.earningDate1+ ' 23:59:59',
				this.shu9='本月新增数据'
				this.biaoqian1=true
				this.biaoqian2=this.biaoqian3=this.biaoqian4=false
				this.xueshenglistfun()
			},
			tip2(){
				this.earningDate = this.smonth+'-01'
				this.earningDate1 = ['01','03','05','07','08','10','12'].includes(this.smonth.substring(5,7))?this.smonth+'-31':this.smonth+'-30'
				this.qishitime=this.earningDate+ ' 00:00:00',
				this.jieshutime=this.earningDate1+ ' 23:59:59',
				this.shu9='上月新增数据'
				this.biaoqian2=true
				this.biaoqian1=this.biaoqian3=this.biaoqian4=false
				this.xueshenglistfun()
			},
			tip3(){
				this.earningDate = this.ssmonth+'-01'
				this.earningDate1 = ['01','03','05','07','08','10','12'].includes(this.ssmonth.substring(5,7))?this.ssmonth+'-31':this.ssmonth+'-30'
				this.biaoqian3=true
				this.biaoqian2=this.biaoqian1=this.biaoqian4=false
				this.qishitime=this.earningDate+ ' 00:00:00',
				console.log(this.qishitime,this.jieshutime)
				this.jieshutime=this.earningDate1+ ' 23:59:59',
				this.shu9='上上月新增数据'
				this.xueshenglistfun()
			},
			queren(){
				this.page=1
				this.queren1()
			},
			sousuo1(){
				if(this.earningDate=='起始日期'){
					uni.showToast({
						title: '请选择起始日期',
						icon: 'none',
						duration: 3000
					})
					return
				}
				if(this.earningDate1=='终止日期'){
					uni.showToast({
						title: '请选择终止日期',
						icon: 'none',
						duration: 3000
					})
					return
				}
				uniCloud.callFunction({
					name:"sum",
					data:{
						leixing:0,//为6时，查找本用户符合条件的流水
						qishitime:this.earningDate+ ' 00:00:00',
						jieshutime:this.earningDate1+ ' 23:59:59',
					}
				}).then(res=>{
					console.log(res)
					if(res.result.res2.data.length){
						this.zongshouru=res.result.res2.data[0].total
					}else{
						this.zongshouru=0
					}
					if(res.result.res3.data.length){
						this.zongzhichu=res.result.res3.data[0].total
					}else{
						this.zongzhichu=0
					}
					this.list1=res.result.res.data
					this.list2=res.result.res1.data
					
				})
			},
			
			xuanzeriqi: function(e) {
				this.biaoqian4=true
				this.biaoqian1=this.biaoqian2=this.biaoqian3=false
				this.shu1 = e.target.value
				this.earningDate = this.shu1+'-01'
				this.earningDate1 = ['01','03','05','07','08','10','12'].includes(this.shu1.substring(5,7))?this.shu1+'-31':this.shu1+'-30'
				this.qishitime=this.earningDate+ ' 00:00:00',
				this.jieshutime=this.earningDate1+ ' 23:59:59',
				this.shu9=this.shu1+'新增数据'
				this.xueshenglistfun()
			},
			bindEarningDateChange: function(e) {
				this.earningDate = e.target.value,
				this.qishitime=this.earningDate+ ' 00:00:00'
					
			},
			bindEarningDateChange1: function(e) {
				this.earningDate1 = e.target.value,
				this.jieshutime=this.earningDate1+ ' 23:59:59'
			},
			//查找本用户的流水
			// liushuilist(){
			// 	uniCloud.callFunction({
			// 		name:"xinyongka",
			// 		data:{
			// 			leixing:6,//为6时，查找本用户的流水
			// 			yonghuid:this.meiyi_userinfo._id,
			// 			skip:(this.page-1)*50,
			// 			limit:50
			// 		}
			// 	}).then(res=>{
			// 		if(res.result.data.length==0){
			// 			uni.showToast({
			// 				title: '已到最底部',
			// 				icon: 'none',
			// 				duration: 3000
			// 			})
			// 			return
			// 		}
			// 		if(this.page == 1){
			// 			this.liushuilist1 = res.result.data
			// 		}else{
			// 			this.liushuilist1.push(...res.result.data)
			// 		}
			// 	})
			// },
		}
	}
</script>

<style>
	.xuanzhong{
		display: flex;
		padding: 9rpx 25rpx;
		justify-content: center;
		align-items: center;
		background-color:blue;
		border-radius: 15rpx;		
		color: white;
	}
	.weixuanzhong{
		display: flex;
		padding: 9rpx 25rpx;
		justify-content: center;
		align-items: center;
		border-color: blue;
		border-width: 4rpx;
		border-style: solid;
		border-radius: 15rpx;
		color: blue;
	}
</style>